<template>
  <div class="news-page">
    <!-- 面包屑导航 -->
    <section class="breadcrumb-section">
      <div class="container">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">{{ $t('common.home') }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ $t('news.breadcrumb') }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </section>

    <!-- 页面头部 -->
    <section class="page-header">
      <div class="container">
        <h1 class="page-title">{{ $t('news.title') }}</h1>
        <p class="page-subtitle">{{ $t('news.subtitle') }}</p>
      </div>
    </section>

    <!-- 搜索和筛选 -->
    <section class="filter-section">
      <div class="container">
        <div class="filter-wrapper">
          <div class="search-box">
            <el-input
              v-model="searchKeyword"
              :placeholder="$t('news.search.placeholder')"
              prefix-icon="el-icon-search"
              clearable
              @input="handleSearch"
            >
            </el-input>
          </div>
          
          <div class="category-filter">
            <el-select v-model="selectedCategory" :placeholder="$t('news.search.category')" @change="handleCategoryChange">
              <el-option :label="$t('news.search.all')" value=""></el-option>
              <el-option :label="$t('news.search.company')" value="company"></el-option>
              <el-option :label="$t('news.search.tech')" value="tech"></el-option>
              <el-option :label="$t('news.search.industry')" value="industry"></el-option>
              <el-option :label="$t('news.search.event')" value="event"></el-option>
              <el-option :label="$t('news.search.product')" value="product"></el-option>
            </el-select>
          </div>
          
          <div class="date-filter">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              :range-separator="$t('news.datePicker.rangeSeparator')"
              :start-placeholder="$t('news.datePicker.startPlaceholder')"
              :end-placeholder="$t('news.datePicker.endPlaceholder')"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              @change="handleDateChange"
            >
            </el-date-picker>
          </div>
        </div>
      </div>
    </section>

    <!-- 新闻列表 -->
    <section class="news-content">
      <div class="container">
        <div class="news-layout">
          <!-- 主要新闻列表 -->
          <div class="news-main">
            <div class="news-list">
              <div 
                class="news-item" 
                v-for="news in filteredNews" 
                :key="news.id"
                @click="viewNewsDetail(news)"
              >
                <div class="news-image">
                  <img :src="news.image" :alt="news.title" @error="handleImageError">
                  <div class="news-category">{{ getCategoryName(news.category) }}</div>
                </div>
                <div class="news-info">
                  <div class="news-meta">
                    <span class="news-date">{{ formatDate(news.date) }}</span>
                    <span class="news-views">
                      <i class="el-icon-view"></i>
                      {{ news.views }}
                    </span>
                  </div>
                  <h3 class="news-title">{{ news.title }}</h3>
                  <p class="news-summary">{{ news.summary }}</p>
                  <div class="news-tags">
                    <el-tag 
                      v-for="tag in news.tags" 
                      :key="tag" 
                      size="small" 
                      type="info"
                    >
                      {{ tag }}
                    </el-tag>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 分页 -->
            <div class="pagination-wrapper">
              <el-pagination
                @current-change="handlePageChange"
                :current-page="currentPage"
                :page-size="pageSize"
                :total="totalNews"
                layout="prev, pager, next, jumper"
                background
              >
              </el-pagination>
            </div>
          </div>
          
          <!-- 侧边栏 -->
          <div class="news-sidebar">
            <!-- 热门新闻 -->
            <div class="sidebar-section">
              <h3 class="sidebar-title">热门新闻</h3>
              <div class="hot-news-list">
                <div 
                  class="hot-news-item" 
                  v-for="news in hotNews" 
                  :key="news.id"
                  @click="viewNewsDetail(news)"
                >
                  <div class="hot-news-image">
                    <img :src="news.image" :alt="news.title" @error="handleImageError">
                  </div>
                  <div class="hot-news-info">
                    <h4 class="hot-news-title">{{ news.title }}</h4>
                    <span class="hot-news-date">{{ formatDate(news.date) }}</span>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 新闻分类 -->
            <div class="sidebar-section">
              <h3 class="sidebar-title">新闻分类</h3>
              <div class="category-list">
                <div 
                  class="category-item" 
                  v-for="category in categories" 
                  :key="category.value"
                  :class="{ active: selectedCategory === category.value }"
                  @click="selectCategory(category.value)"
                >
                  <span class="category-name">{{ category.name }}</span>
                  <span class="category-count">({{ category.count }})</span>
                </div>
              </div>
            </div>
            
            <!-- 标签云 -->
            <div class="sidebar-section">
              <h3 class="sidebar-title">热门标签</h3>
              <div class="tag-cloud">
                <el-tag 
                  v-for="tag in popularTags" 
                  :key="tag.name"
                  :type="tag.type"
                  size="small"
                  @click="searchByTag(tag.name)"
                >
                  {{ tag.name }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'News',
  data() {
    return {
      searchKeyword: '',
      selectedCategory: '',
      dateRange: [],
      currentPage: 1,
      pageSize: 10,
      newsList: [
        {
          id: 1,
          title: '海康威视成为杭州2022年亚运会官方赞助商',
          summary: '助力打造智能亚运，为亚运会提供智能化技术支持和服务，展现中国科技实力',
          content: '海康威视作为杭州2022年第19届亚运会、第4届亚残运会官方智能物联及大数据服务赞助商，将为亚运会提供全方位的智能化技术支持和服务...',
          category: 'company',
          date: '2022-01-18',
          image: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
          views: 12580,
          tags: ['亚运会', '赞助商', '智能化']
        },
        {
          id: 2,
          title: '海康威视牵头启动城市生命线物联技术课题',
          summary: '助推城市生命线建设升级，为城市安全提供技术保障，推动智慧城市建设',
          content: '来自清华大学、中国城市燃气协会、中国信息通信研究院等单位的权威专家，对海康威视在全国城市生命线安全工程建设中所做的努力给予充分肯定...',
          category: 'tech',
          date: '2025-08-12',
          image: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
          views: 8920,
          tags: ['城市生命线', '物联网', '智慧城市']
        },
        {
          id: 3,
          title: '海康威视携手天业冷链，让万吨级冷库"鲜"人一步',
          summary: '通过部署物联感知设备和AI算法，实现冷库数字化管理，提升冷链物流效率',
          content: '天业冷链集团与海康威视携手合作，通过部署物联感知设备和AI算法，实现从车辆调度到冷库的数字化管理，用科技助力农副产品的保鲜与流通...',
          category: 'industry',
          date: '2025-08-11',
          image: 'https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
          views: 7560,
          tags: ['冷链物流', 'AI算法', '数字化']
        },
        {
          id: 4,
          title: '中国气象局与海康威视进行交流座谈',
          summary: '加强技术创新合作，推进气象业务向智慧化、数字化新业态转型发展',
          content: '中国气象局正着力推进气象业务向智慧化、数字化新业态转型发展，海康威视在物联感知、智能观测等领域具有技术优势...',
          category: 'company',
          date: '2025-08-07',
          image: 'https://images.unsplash.com/photo-1504608524841-42fe6f032b4b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
          views: 6340,
          tags: ['气象局', '智慧化', '数字化转型']
        },
        {
          id: 5,
          title: '数据走进三维地图，海康威视助力盐化工基地数智管理升级',
          summary: '以"防、管、控"为核心，提供可视化应急指挥调度，支撑完善化工园区安全风险防控',
          content: '樟树盐化工基地联合海康威视，以"防、管、控"为核心，提供可视化应急指挥调度，支撑完善化工园区安全风险防控最后一个环节...',
          category: 'tech',
          date: '2025-08-04',
          image: 'https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
          views: 5230,
          tags: ['三维地图', '化工园区', '安全防控']
        },
        {
          id: 6,
          title: '海康威视发布新一代AI开放平台',
          summary: '基于深度学习技术，为各行业提供更智能、更高效的AI解决方案',
          content: '海康威视正式发布新一代AI开放平台，基于深度学习技术，为各行业提供更智能、更高效的AI解决方案，推动产业智能化升级...',
          category: 'product',
          date: '2025-07-28',
          image: 'https://images.unsplash.com/photo-1485827404703-89b55fcc595e?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
          views: 15680,
          tags: ['AI平台', '深度学习', '智能化']
        },
        {
          id: 7,
          title: '2025年智慧城市发展趋势报告发布',
          summary: '深度分析智慧城市建设现状，预测未来发展方向和技术趋势',
          content: '海康威视联合权威机构发布2025年智慧城市发展趋势报告，深度分析智慧城市建设现状，预测未来发展方向和技术趋势...',
          category: 'industry',
          date: '2025-07-20',
          image: 'https://images.unsplash.com/photo-1518709268805-4e9042af2176?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
          views: 9870,
          tags: ['智慧城市', '趋势报告', '技术预测']
        },
        {
          id: 8,
          title: '海康威视举办2025年技术开放日活动',
          summary: '展示最新技术成果，与合作伙伴共同探讨行业发展趋势',
          content: '海康威视举办2025年技术开放日活动，展示最新技术成果，与合作伙伴共同探讨行业发展趋势，推动技术创新和产业合作...',
          category: 'event',
          date: '2025-07-15',
          image: 'https://images.unsplash.com/photo-1515187029135-18ee286d815b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
          views: 11230,
          tags: ['技术开放日', '合作伙伴', '技术创新']
        }
      ],
      categories: [
        { name: '公司新闻', value: 'company', count: 2 },
        { name: '技术资讯', value: 'tech', count: 2 },
        { name: '行业动态', value: 'industry', count: 2 },
        { name: '活动公告', value: 'event', count: 1 },
        { name: '产品发布', value: 'product', count: 1 }
      ],
      popularTags: [
        { name: 'AI平台', type: 'primary' },
        { name: '智慧城市', type: 'success' },
        { name: '物联网', type: 'warning' },
        { name: '数字化转型', type: 'info' },
        { name: '技术创新', type: 'danger' },
        { name: '合作伙伴', type: '' }
      ]
    }
  },
  computed: {
    filteredNews() {
      let filtered = this.newsList
      
      // 分类筛选
      if (this.selectedCategory) {
        filtered = filtered.filter(news => news.category === this.selectedCategory)
      }
      
      // 关键词搜索
      if (this.searchKeyword) {
        const keyword = this.searchKeyword.toLowerCase()
        filtered = filtered.filter(news => 
          news.title.toLowerCase().includes(keyword) ||
          news.summary.toLowerCase().includes(keyword) ||
          news.tags.some(tag => tag.toLowerCase().includes(keyword))
        )
      }
      
      // 日期筛选
      if (this.dateRange && this.dateRange.length === 2) {
        const [startDate, endDate] = this.dateRange
        filtered = filtered.filter(news => 
          news.date >= startDate && news.date <= endDate
        )
      }
      
      return filtered
    },
    
    totalNews() {
      return this.filteredNews.length
    },
    
    hotNews() {
      return [...this.newsList]
        .sort((a, b) => b.views - a.views)
        .slice(0, 5)
    }
  },
  methods: {
    handleSearch() {
      this.currentPage = 1
    },
    
    handleCategoryChange() {
      this.currentPage = 1
    },
    
    handleDateChange() {
      this.currentPage = 1
    },
    
    handlePageChange(page) {
      this.currentPage = page
    },
    
    selectCategory(category) {
      this.selectedCategory = category
      this.currentPage = 1
    },
    
    searchByTag(tag) {
      this.searchKeyword = tag
      this.currentPage = 1
    },
    
    viewNewsDetail(news) {
      this.$router.push(`/news/${news.id}`)
    },
    
    getCategoryName(category) {
      const categoryMap = {
        company: '公司新闻',
        tech: '技术资讯',
        industry: '行业动态',
        event: '活动公告',
        product: '产品发布'
      }
      return categoryMap[category] || '其他'
    },
    
    formatDate(date) {
      return new Date(date).toLocaleDateString('zh-CN')
    },
    
    handleImageError(e) {
      e.target.style.display = 'none'
    }
  }
}
</script>

<style lang="scss" scoped>
.news-page {
  .breadcrumb-section {
    background: #f8f9fa;
    padding: 15px 0;
    border-bottom: 1px solid #e9ecef;
    
    .el-breadcrumb {
      font-size: 14px;
    }
  }

  .page-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 80px 0;
    text-align: center;
    
    .page-title {
      font-size: 48px;
      font-weight: bold;
      margin-bottom: 20px;
    }
    
    .page-subtitle {
      font-size: 18px;
      opacity: 0.9;
      max-width: 600px;
      margin: 0 auto;
    }
  }
  
  .filter-section {
    background: #f8f9fa;
    padding: 30px 0;
    border-bottom: 1px solid #e9ecef;
    
    .filter-wrapper {
      display: flex;
      gap: 20px;
      align-items: center;
      flex-wrap: wrap;
      
      .search-box {
        flex: 1;
        min-width: 300px;
      }
      
      .category-filter,
      .date-filter {
        min-width: 200px;
      }
    }
  }
  
  .news-content {
    padding: 60px 0;
    
    .news-layout {
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: 40px;
      
      .news-main {
        .news-list {
          .news-item {
            display: flex;
            gap: 20px;
            padding: 30px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.1);
            margin-bottom: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            
            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            }
            
            .news-image {
              position: relative;
              width: 200px;
              height: 150px;
              flex-shrink: 0;
              
              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 6px;
              }
              
              .news-category {
                position: absolute;
                top: 10px;
                left: 10px;
                background: rgba(64, 158, 255, 0.9);
                color: white;
                padding: 4px 8px;
                border-radius: 4px;
                font-size: 12px;
              }
            }
            
            .news-info {
              flex: 1;
              
              .news-meta {
                display: flex;
                gap: 20px;
                margin-bottom: 15px;
                font-size: 14px;
                color: #666;
                
                .news-views {
                  display: flex;
                  align-items: center;
                  gap: 5px;
                }
              }
              
              .news-title {
                font-size: 20px;
                font-weight: bold;
                color: #2c3e50;
                margin-bottom: 15px;
                line-height: 1.4;
              }
              
              .news-summary {
                color: #666;
                line-height: 1.6;
                margin-bottom: 15px;
              }
              
              .news-tags {
                display: flex;
                gap: 8px;
                flex-wrap: wrap;
              }
            }
          }
        }
        
        .pagination-wrapper {
          text-align: center;
          margin-top: 40px;
        }
      }
      
      .news-sidebar {
        .sidebar-section {
          background: white;
          border-radius: 8px;
          padding: 25px;
          margin-bottom: 30px;
          box-shadow: 0 2px 12px rgba(0,0,0,0.1);
          
          .sidebar-title {
            font-size: 18px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #409eff;
          }
          
          .hot-news-list {
            .hot-news-item {
              display: flex;
              gap: 15px;
              padding: 15px 0;
              border-bottom: 1px solid #f0f0f0;
              cursor: pointer;
              transition: all 0.3s ease;
              
              &:last-child {
                border-bottom: none;
              }
              
              &:hover {
                background: #f8f9fa;
                border-radius: 6px;
                padding-left: 15px;
                padding-right: 15px;
                margin-left: -15px;
                margin-right: -15px;
              }
              
              .hot-news-image {
                width: 80px;
                height: 60px;
                flex-shrink: 0;
                
                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  border-radius: 4px;
                }
              }
              
              .hot-news-info {
                flex: 1;
                
                .hot-news-title {
                  font-size: 14px;
                  font-weight: bold;
                  color: #2c3e50;
                  margin-bottom: 8px;
                  line-height: 1.4;
                }
                
                .hot-news-date {
                  font-size: 12px;
                  color: #999;
                }
              }
            }
          }
          
          .category-list {
            .category-item {
              display: flex;
              justify-content: space-between;
              padding: 12px 0;
              cursor: pointer;
              transition: all 0.3s ease;
              border-radius: 6px;
              
              &:hover {
                background: #f8f9fa;
                padding-left: 10px;
                padding-right: 10px;
                margin-left: -10px;
                margin-right: -10px;
              }
              
              &.active {
                background: #409eff;
                color: white;
                padding-left: 10px;
                padding-right: 10px;
                margin-left: -10px;
                margin-right: -10px;
              }
              
              .category-count {
                color: #999;
                font-size: 12px;
              }
            }
          }
          
          .tag-cloud {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            
            .el-tag {
              cursor: pointer;
              transition: all 0.3s ease;
              
              &:hover {
                transform: scale(1.05);
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .news-page {
    .breadcrumb-section {
      padding: 10px 0;
    }

    .page-header {
      padding: 60px 0;
      
      .page-title {
        font-size: 32px;
      }
      
      .page-subtitle {
        font-size: 16px;
      }
    }
    
    .filter-section {
      .filter-wrapper {
        flex-direction: column;
        align-items: stretch;
        
        .search-box {
          min-width: auto;
        }
        
        .category-filter,
        .date-filter {
          min-width: auto;
        }
      }
    }
    
    .news-content {
      .news-layout {
        grid-template-columns: 1fr;
        gap: 30px;
        
        .news-main {
          .news-list {
            .news-item {
              flex-direction: column;
              
              .news-image {
                width: 100%;
                height: 200px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
